<template>
	<view>
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				我的订单
			</view>
		</u-navbar>
		<view class="container-box">
			<!-- #ifdef H5 -->
			<u-sticky index='1' :offset-top="0" :enable="enable">
			<!-- #endif -->
			<!-- #ifndef  H5 -->
			<u-sticky index='1' :offset-top="offsetTop" h5-nav-height="44" :enable="enable">
			<!-- #endif -->
				<view class="">
					<view class="mian-navigationBar">
						<view :class="listQuery.activeState==''?'color-green':''" @click="navigationBars('')">全部</view>
						<view :class="listQuery.activeState=='wait_pay'?'color-green':''" @click="navigationBars('wait_pay')">待付款</view>
						<view :class="listQuery.activeState=='wait_send'?'color-green':''" @click="navigationBars('wait_send')">待发货</view>
						<view :class="listQuery.activeState=='send'?'color-green':''" @click="navigationBars('send')">待收货</view>
						<view :class="listQuery.activeState=='complete'?'color-green':''" @click="navigationBars('complete')">已完成</view>
						
					</view>
				</view>
			</u-sticky>
			<u-gap height="20"></u-gap>
			<u-empty text="还没有订单数据~" mode="list" margin-top="120" v-if="!list.length"></u-empty>
			<view class="main"  v-for="(item,index) in list" :key="index" v-else>
				<view class="main-top">
					<view>订单号：{{item.no}}</view>
					<view class="grey">{{item.status_name}}</view>
				</view>
				<view class="main-content" @click="multiRedirect('/pages/orederList/orderDetails?id='+item.id)">
					<view class="main-content-img" v-for="(goods,goods_index) in item.goods_list" :key="goods_index">
						<view class="main-content-img-top flex" >
							<image :src="goods.img" mode="aspectFill"></image>
							<view class="xingxi">
								<view class="flex justify-between">
									<view class="name">{{goods.name}}</view>
									<view class="price text-bold text-orange">
										￥<text>{{goods.price}}</text>
									</view>
								</view>
								<!-- <view class="text-orange">
									<view class="time">下单时间：2021/03/01-2021/03/20</view>
									<view class="time">支付时间：2021/03/01-2021/03/20</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="main-bottom">
					<view class="flex align-center">
						
						<button class="cu-btn round line-red" @click="handleOpt('del',index,item)"
							v-if="item.handle_action.indexOf('del')>-1">删除</button>
						<button class="cu-btn round line-gray" @click="handleOpt('cancel',index,item)"
							v-if="item.handle_action.indexOf('cancel')>-1">取消订单</button>
						<button class="cu-btn round line-red" @click="handlePay(item)" :loading="paySumibtLoading"
							v-if="item.handle_action.indexOf('pay')>-1" hover-class="none">去付款</button>
						<button class="cu-btn round line-gray" @click="handleOpt('reminder',index,item)"
							v-if="item.handle_action.indexOf('reminder')>-1">提醒发货</button>
						<button class="cu-btn round line-red" @click.stop="handleOpt('receive',index,item)"
							v-if="item.handle_action.indexOf('receive')>-1">确认收货</button>
						
						
						
						<button class="cu-btn" open-type="contact" v-if="item.handle_action.indexOf('contact')>-1">咨询客服</button>
					</view>
				</view>
			</view>
			
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				paySumibtLoading:false,
				is_show:false,
				enable: true,
				offsetTop: 0,
				
				listQuery:{
					keyword: '',
					activeState: '',
					page: 1,
				},			
				list: [],
				total_page:false,
			};
		},
		// 在对应的show和hide页面生命周期中打开或关闭监听
		onHide() {
			this.enable = false
		},
		onShow() {
			this.enable = true
			this.setOffestTop()
			if(this.is_show){
				this._initData(true)
			}else{
				this.is_show = true
			}
		},
		onLoad(option) {
			console.log(option)
			this.listQuery.activeState = option.activeState
			this._initData(true);
		},
		onReachBottom() {
			console.log('-----onReachBottom')
			if(this.total_page!==false && this.listQuery.page<=this.total_page){
				this._initData();
			}
		},
		methods: {
			_initData(is_rest) {
				if (is_rest === true) {
					this.listQuery.page = 1;
					this.total_page = false;
					this.list = [];
				}
				
				this.$u.http.post('/api/order/lists', this.listQuery).then(({
					data
				}) => {
			
					this.list = this.list.concat(data.list);
					this.total_page = data.total_page || 0;
					this.listQuery.page++;
					console.log('-order_list-', this.list)
				}).catch(v => {
					console.log(v);
			
				});
			},
			Back() {
				uni.navigateBack({});
			},
			// 适配吸顶tab高度
			setOffestTop() {
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				console.log(this.offsetTop)
			},
			navigationBars(index) {
				this.listQuery.activeState = index;
				this._initData(true)
			},
			handlePay(item){
				this.paySumibtLoading = true
				const that = this
				this.$u.http.post('/api/order/buyCoursePayInfo', {
					order_id:item.id,
					openid:this.vuex_openid,
				}).then(({ data }) => {
					this.paySumibtLoading = false
					
					let pay_info = data.info||{};
					let pay_obj = Object.assign({},pay_info,{
						success: function (res) {
							console.log('pay,..........success:' + JSON.stringify(res));
							that.$u.toast('支付成功')
							setTimeout(function(){
								that._initData(true)
							},1000)
							
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
							if(err.errMsg=='requestPayment:fail cancel'){
								that.$u.toast('已取消支付')
							}else{
								that.$u.toast('支付失败')
							}
						}})
					//唤醒支付
					console.log('pay_obj_______________',pay_obj)
					uni.requestPayment(pay_obj);
					
					
				}).catch(()=>{
					this.paySumibtLoading = false
					
				})
			},
			//提醒发货
			handleOpt(mode, index, order) {
				let that = this;
				let content = '';
				let url_path = '';
				let fun = () => {
					//刷新数据列表
					that._initData(true);
				};
				if (mode == 'del') {
					content = '确定删除该订单?';
					url_path = '/api/order/del';
					fun = function() {
						that.list.splice(index, 1);
					};
				} else if (mode == 'cancel') {
					content = '确定取消该订单?';
					url_path = '/api/order/cancel';
			
			
				} else if (mode == 'receive') {
					content = '是否立即收货?';
					url_path = '/api/order/receive';
			
				} else if (mode == 'reminder') {
					content = '是否提醒商家?';
					url_path = '/api/order/reminder';
					fun = function({
						msg
					}) {
						that.$showToastNoIcon(msg)
					};
				}
			
				uni.showModal({
					title: '提示',
					content: content,
					success: function(res) {
						if (res.confirm) {
							//发起请求
							that.$u.http.post(url_path, {
								id: order.id,
							}).then((v) => {
								console.log(v)
								fun(v);
							});
			
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
		}
	};
</script>

<style lang="scss">
	.time-text {
		line-height: 130rpx;
		text-align: center;
		font-size: 36rpx;
		color: #624C47;
		background-color: #EDD1C5;
	}

	.mian-navigationBar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		height: 88rpx;
		view {
			font-size: 28rpx;
			padding: 20rpx 15rpx;
			border-bottom: 4rpx #FFFFFF solid;
		}
		.color-green {
			border-bottom: 4rpx #FE7E00 solid;
		}
	}
	.main {
		background-color: #FFFFFF;
		margin-bottom: 16rpx;
	}

	.main-top {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 2rpx #E8E8E8 solid;
		view {
			font-size: 26rpx;
		}
		.grey {
			color: #FE7E00;
		}
		.grey text {
			font-size: 34rpx;
		}
	}
	.main-content-img {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 2rpx #E8E8E8 solid;
		.main-content-img-top {
			width: 100%;
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}
			.xingxi {
				width: 550rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 20rpx 20rpx 0 20rpx;
				padding-right: 0;
			
				.name {
					color: #333333;
					font-size: 26rpx;
					max-width: 350rpx;
					overflow:hidden; //超出的文本隐藏
					text-overflow:ellipsis; //溢出用省略号显示
					white-space:nowrap; //溢出不换行
				}
			
				.price {
					font-size: 24rpx;
					text {
						font-size: 32rpx;
					}
				}
			
				.time {
					margin-bottom: 6rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.main-bottom {
		display: flex;
		flex-direction: row-reverse;
		padding: 30rpx;
		.cu-btn {
			width: 145rpx;
			height: 55rpx;
			padding: 0;
			background-color: #FE7E00;
			margin-left: 20rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
</style>
